<template>
  <div class="balance-query">
    <div class="page-header">
      <h2>💰 余额查询</h2>
      <p class="subtitle">查看您的账户余额和基本信息</p>
    </div>
    <div class="info-grid">
      <!-- 个人信息卡片 -->
      <div class="info-card personal-info">
        <h3 class="card-title">
          <span class="icon">👤</span> 个人信息
        </h3>
        <ul class="user-info-list">
          <li>
            <span class="label">账户ID:</span>
            <span class="value">{{ userInfo.customerID }}</span>
          </li>
          <li>
            <span class="label">姓名:</span>
            <span class="value">{{ userInfo.customerName }}</span>
          </li>
          <li>
            <span class="label">手机号:</span>
            <span class="value">{{ userInfo.telephone }}</span>
          </li>
          <li>
            <span class="label">身份证号:</span>
            <span class="value">{{ userInfo.pid }}</span>
          </li>
          <li>
            <span class="label">联系地址:</span>
            <span class="value">{{ userInfo.address || '无' }}</span>
          </li>
        </ul>
      </div>

      <!-- 银行卡余额卡片 -->
      <div class="info-card">
        <div class="card-header">
          <h3 class="card-title">
            <span class="icon">🏦</span> 我的银行卡余额
          </h3>
          <button class="refresh-btn" @click="refreshBalance" title="刷新余额">
            <span class="icon">🔄</span>
          </button>
        </div>
        <p class="last-update" v-if="lastUpdateTime">最后更新: {{ lastUpdateTime }}</p>
        <div class="card-list">
          <div
            class="card-item"
            v-for="(card, index) in userCards"
            :key="card.cardNumber"
            :class="['card-variant-' + (index % 4)]"
          >
            <div class="card-details">
              <span class="card-number">{{ card.curID}}     {{card.savingName}}</span>
              <span class="card-balance">¥{{ formatCurrency(card.balance) }}</span>
              <span class="card-number">{{ card.cardID}}</span>
            </div>
            <span class="card-status normal">{{card.isReportLoss === '1' ? '挂失' : '正常'}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {onMounted} from "vue";
import axios from "axios";

export default {
  name: 'BalanceQuery',
  props: {
    userInfo: {
        type: Object,
        required: true
      },
    userCards:{
        type: Object,
        required: true
    }
  },
  data() {
    return {
      currentTime: '',
      lastUpdateTime: '',
      refreshInterval: null,
    }
  },
  mounted() {
    this.updateTime()
    this.refreshInterval = setInterval(this.updateTime, 1000)

  },
  beforeUnmount() {
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval)
    }
  },
  methods: {
    formatCurrency(amount) {
      return amount.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    },
    formatCardNumber(cardNumber) {
      if (!cardNumber) return ''
      return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ')
    },
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN')
    },
    refreshBalance() {
      // 模拟刷新余额
      this.lastUpdateTime = new Date().toLocaleString('zh-CN')
      // 这里可以调用API刷新余额
      this.$emit('balance-refreshed')
    }
  }
}
</script>

<style scoped>
.balance-query {
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 24px;
}
.page-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
}
.page-header .subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

/* --- Card Styles --- */
.info-card, .quick-actions-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Grid layout for info cards */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}


/* Quick Actions */
.quick-actions-card .action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #f9fafb;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}
.action-btn:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-2px);
}
.action-btn .icon { font-size: 18px; }


/* User Info Card */
.info-card.personal-info {
  border-top: 4px solid #3b82f6;
}

.user-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.user-info-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
}
.user-info-list li:last-child {
  border-bottom: none;
}
.user-info-list .label {
  color: #6b7280;
}
.user-info-list .value {
  font-weight: 500;
  color: #374151;
}

/* Bank Cards Card */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.card-header .card-title {
  margin-bottom: 0;
}
.refresh-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
}
.refresh-btn:hover {
  color: #3b82f6;
  background-color: #eff6ff;
}
.last-update {
  font-size: 12px;
  color: #9ca3af;
  margin: -4px 0 16px 0;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  border-radius: 12px;
  color: white;
  min-height: 140px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: none;
}
.card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card-item.card-variant-0 { background: linear-gradient(45deg, #3b82f6, #60a5fa); }
.card-item.card-variant-1 { background: linear-gradient(45deg, #1f2937, #4b5563); }
.card-item.card-variant-2 { background: linear-gradient(45deg, #16a34a, #4ade80); }
.card-item.card-variant-3 { background: linear-gradient(45deg, #7c3aed, #a78bfa); }

.card-icon {
  display: none;
}
.card-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
.card-number {
  font-family: "SF Mono", "Courier New", Courier, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  margin-top: 4px;
  opacity: 0.9;
}
.card-balance {
  font-size: 24px;
  font-weight: 600;
}
.card-status {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  z-index: 1;
}

/* Responsive */
@media (max-width: 992px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .page-header h2 { font-size: 24px; }
  .page-header .subtitle { font-size: 14px; }
  .info-card, .quick-actions-card { padding: 20px; }
  .action-buttons { grid-template-columns: 1fr 1fr; }
}
</style> 